<template>
  <div>
  <head-vue></head-vue>

  <div style="border-right: 1px solid #f0f0f0;width: 10%;height:93.5%;position:fixed;left: 0;top: 3.74rem;">
    <ul class="mt-2">
      <li id="menu-1" class="m-active" @click="menu1()"><i class="bi bi-search ml-4"></i> 订单概况</li>
      <li id="menu-2" class="" @click="menu2()"><i class="bi bi-search ml-4"></i> 交易记录</li>
    </ul>
  </div>

    <div id="order" style="position:relative;top: 3.7rem;left: 10%;width: 90%;">
      <div class="container-fluid mt-4">
        <div class="card">
          <div class="card-body">
            <p><i class="zi zi_minus zi_rotate90 p-0 m-0" style="color: blue"></i> 筛选条件</p>

            <div class="mb-2">
              查询日期：
              <el-radio-group v-model="selectTime" class="">
                <el-radio-button label="今天"></el-radio-button>
                <el-radio-button label="近七天"></el-radio-button>
                <el-radio-button label="十五天"></el-radio-button>
                <el-radio-button label="全部"></el-radio-button>
              </el-radio-group>
            </div>

            选择店铺：
            <el-select v-model="DefaultText" placeholder="请选择">
              <el-option
                v-for="item in ShopName"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
      </div>

      <div class="container-fluid mt-4">
        <div class="card">
          <div class="card-body">
            <p><i class="zi zi_minus zi_rotate90 p-0 m-0" style="color: blue"></i> 营业概况</p>

            <table class="table table-striped table-hover0">
              <thead>
                <tr>
                  <th>订单ID</th>
                  <th>订单编号</th>
                  <th>订单金额</th>
                  <th>会员优惠</th>
                  <th>实际到账/退款金额</th>
                  <th>订单时间</th>
                </tr>
              </thead>

              <tbody>
                <tr>
                  <td>10001</td>
                  <td>5343684554545454</td>
                  <td style="color: red">￥<span>100</span></td>
                  <td style="color: gold"><span>0.97</span></td>
                  <td style="color: mediumseagreen">+ <span>97</span></td>
                  <!-- 此处判断是否已退款 若为退款则显示以下样式-->
              <!--<td style="color: red">- <span>97</span></td>-->
                  <td style="">2021/12/07 <span>-</span> 01:43：54</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

    </div>
    <div id="goods" style="position:relative;top: 3.7rem;left: 10%;width: 90%;display: none">
      <div class="container-fluid mt-4">
        <div class="card">
          <div class="card-body">
            <p><i class="zi zi_minus zi_rotate90 p-0 m-0" style="color: blue"></i> 筛选条件</p>
            选择店铺：
            <el-select v-model="DefaultText_Shop" placeholder="请选择">
              <el-option
                v-for="item in ShopName"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
      </div>

      <br>

      <div class="container-fluid " style="">
        <div class="card">
          <div class="card-body">
            <div class="col-12 p-0">
              <p><i class="zi zi_minus zi_rotate90 p-0 m-0" style="color: blue"></i> 商品概况</p>
            </div>

            <div class="container-fluid">
              <div class="row-fluid form-inline">
                <div class="font-color-order col-4">
                  <div class="card order-background">
                    <div class="card-body">
                      <p>
                        商品总数: <br>
                        <span class="h1 order-true"> <strong><span>22</span></strong> </span>
                      </p>
                    </div>
                  </div>
                </div>

                <div class="font-color-order col-4">
                  <div class="card order-background">
                    <div class="card-body">
                      <p>
                        已上架商品: <br>
                        <span class="h1 order-true"> <strong><span>22</span></strong> </span>
                      </p>
                    </div>
                  </div>
                </div>

                <div class="font-color-order col-4">
                  <div class="card order-background">
                    <div class="card-body">
                      <p>
                        已下架商品: <br>
                        <span class="h1 order-true"> <strong><span>5</span></strong> </span>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <br>

      <div class="container-fluid mt-4">
        <div class="card">
          <div class="card-body">
            <p><i class="zi zi_minus zi_rotate90 p-0 m-0" style="color: blue"></i> 商品排行</p>
              排行类型：
              <el-select v-model="DefaultText_Goods" placeholder="请选择">
                <el-option
                  v-for="item in SearchType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>


              <span class="ml-5">查询日期：</span>
              <el-radio-group v-model="selectTime" class="">
                <el-radio-button label="今天"></el-radio-button>
                <el-radio-button label="近七天"></el-radio-button>
                <el-radio-button label="十五天"></el-radio-button>
                <el-radio-button label="全部"></el-radio-button>
              </el-radio-group>


            <table class="table table-striped table-hover mt-5">
              <thead>
                <tr>
                  <th>排名</th>
                  <th>商品分类</th>
                  <th>商品名称</th>
                  <th>销量</th>
                  <th>销售额(元)</th>
                </tr>
              </thead>

              <tbody>
                <tr>
                  <td>1</td>
                  <td>油炸</td>
                  <td>去掉头都能吃的鸡肉味嘎嘣脆</td>
                  <td>1000</td>
                  <td>10000000</td>
                </tr>
              </tbody>
            </table>

          </div>
        </div>
      </div>
    </div>

</div>
</template>

<script>
  export default {
    name: "App",
    data(){
      return{
        selectTime:"今天",
        ShopName:[
          {
            value:"1",  //点击后的值
            label:"店铺名称1" //点击后选择框显示的文本
          },
          {
            value:"2",  //点击后的值
            label:"店铺名称2" //点击后选择框显示的文本
          }
          ],
        DefaultText_Shop:"",

        SearchType:[
          {
            value:"1",
            label:"按商品销排行",
          },
          {
            value:"2",
            label:"按商品销售额排行",
          }
        ],
        DefaultText_SearchType:""
      }
    },
    methods:{
      menu1(){
        $("#menu-1").attr("class","m-active")
        $("#menu-2").attr("class"," ")
        $("#order").fadeIn(300)
        $("#goods").hide()
      },
      menu2(){
        $("#menu-1").attr("class"," ")
        $("#menu-2").attr("class","m-active")
        this.flag=true
        $("#order").hide()
        $("#goods").fadeIn(300)
      }
    }
  }
</script>

<style scoped>

  li{
    list-style: none;
    /*background-color: #F0FAFF;*/
    cursor: pointer;
    height: 3rem;
    line-height: 2.9rem;
  }
  ul{
    padding: 0;
  }
  .m-active{
    background-color: #F0FAFF;
    border-right: 2px solid #2D8CF0;
  }
  .order-true{
    color: black;
  }
  .order-background{
    background-color: #f4f4f4;
  }
</style>
